<template>
<div class="page-content">
    <quill-editor
      class="editor"
      ref="myTextEditor"
      v-model.lazy.trim="content"
      :options="editorOption"
      @change="onEditorChange"
    />
  </div>
</template>

<script>
// import dedent from 'dedent'
import hljs from 'highlight.js'
import debounce from 'lodash/debounce'
import { quillEditor } from 'vue-quill-editor'
// highlight.js style
import 'highlight.js/styles/github-dark.css'
// import theme style
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
export default {
  name: 'quill-example-snow',
  title: 'Theme: snow',
  components: {
    quillEditor
  },
  data () {
    return {
      editorOption: {
        placeholder: '',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // toggled buttons
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote'],
            ['code-block', 'image', 'link']
          ],
          syntax: {
            highlight: text => hljs.highlightAuto(text).value
          }
        }
      },
      content: ''
    }
  },
  methods: {
    onEditorChange: debounce(function (value) {
      this.content = value.html
      this.$emit('getText', this.content)
    }, 466) /* ,    onEditorBlur (editor) {
      console.log('editor blur!', editor)
    },
    onEditorFocus (editor) {
      console.log('editor focus!', editor)
    }
    onEditorReady (editor) {
      console.log('editor ready!', editor)
    } */

  },
  computed: {
    editor () {
      return this.$refs.myTextEditor.quill
    }/* ,
    contentCode () {
      return hljs.highlightAuto(this.content).value
    } */
  },
  mounted () {
    // console.log('this is Quill instance:', this.editor)
  }
}
</script>

<style lang="scss" scoped>
  .page-content {
    width: 100%;
    height: 100%;

    ::v-deep(.editor) {
      .ql-editor {
        min-height: 200px;
      }
    }

    .header {
      padding-bottom: 15px;
      border-bottom: 1px solid #eee;
    }

    ::v-deep(.el-form) {
      .el-form-item {
        max-width: 700px;
      }
    }

    /* 此处是隐藏上传按钮的样式 */
    ::v-deep(.disabled .el-upload--picture-card) {
      display: none;
    }
   ::v-deep(.ql-snow) {
      padding: 0 8px !important;
    }
  }
</style>
